<template>
	<view class="page">
		<view class="header">
			<view class="header-1">
				<u-icon name="arrow-leftward" color="323233" size="18" @click="toGoBack()" />
			</view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<scroll-view class="hv90" :scroll-y="true">
			<!-- 培训列表（培训考试中心） -->
			<view class="content">
				<!-- // {{trainingLists}} -->
				<template v-if="trainingLists.length > 0">
					<view class="item" v-for="(item, index) in trainingLists" :key='index' @click="tolearnWindow(item)">
						<view class="title">{{ item.objectName }}</view>
						<view class="oneButtons space-between">
							<view>
								<template v-if="item.enabledMark">
									<view class="examBtn1" v-if="item.enabledMark == 10">待自测</view>
									<view class="examBtn2" v-else-if="item.enabledMark == 20">学习中</view>
									<view class="examBtn3" v-else-if="item.enabledMark == 30">已完成</view>
								</template>
								<template v-else>
									<view class="examBtn1">待自测</view>
								</template>
							</view>
							<view class="btn1">
								去学习 <image src="/static/tab/arrowRight.png"></image>
							</view>
						</view>
						<view class="twoButtons flex">
							<view>
								<image :src="fileImage + item.cover" style="width: 146px; height: 73px; object-fit: cover; display: block;"></image>
							</view>
							<view class="" style="flex: 2">
								<view class="line-ellipsis">
									{{ item.description }}
								</view>
								<template v-if="item.examTask && item.enabledMark == 30">
									<!-- <view class="examDes">
										<view class="examScore" style="margin-right: 25px;">理论考试<text>{{ item.examTask.myScore }}</text>分</view>
										<view class="examScore">技能考试<text>{{ item.examTask.myScore }}</text>分</view>
									</view> -->
								</template>
								<template v-else>
									<view :class="['buttons', item.process >= 100 ? 'disabled' : '']" style="width: 66px; float: right;">自测</view>
								</template>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="none-data">
						<image src="@/static/common/noData.png" class="noData"></image>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		myExamList,
		getScopeList,
		getSubjectDetail
	} from '@/api/index'
	import {
		getDictionaryDataList
	} from '@/api/dictionary'
	export default {
		data() {
			return {
				fileImage: this.$globalSetting.fileImage,
				id: null,
				trainingLists: [],
				categoryId: null,
				currentPage: 1,
				pageSize: 10,
				certificateOptions: [],
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getDicList();
		},
		onShow() {},
		methods: {
			toGoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 培训考试中心普
			getDicList() {
				getDictionaryDataList('559344237955514629', {
					keyword: '',
					isTree: 0
				}).then(res => {
					this.certificateOptions = res.data.list;
					for (let i in this.certificateOptions) {
						if (this.certificateOptions[i].enCode == 'Leader') {
							this.categoryId = this.certificateOptions[i].id;
						}
					}
					this.getList();
				})
			},
			getList() {
				// 培训考试中心
				getScopeList({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					categoryId: this.categoryId,
					enabledMark: 1,
				}).then((res) => {
					if (res.code === 200 && res.data.list.length > 0) {
						const detailPromises = res.data.list.map(item => {
							return getSubjectDetail(item.id).then(detailRes => {
								if (detailRes.code === 200) {
									item.detail = detailRes.data; 
								}
								return item;
							});
						});
						
						Promise.all(detailPromises).then(completedItems => {
							completedItems.forEach(item => {
								if (item.id == this.id) {
									let detailEnabledMark = item.detail.enabledMark;
									let description = item.detail.description;
									let stageList = item.detail.stageList;
									if (stageList) {
										stageList.forEach(fItem => {
											if(fItem.sortCode == 0) {
												let subjectStageRelationList = fItem.subjectStageRelationList;
												subjectStageRelationList.forEach(sItem => {
													sItem.detailEnabledMark = detailEnabledMark;
													sItem.description = description;
													this.trainingLists.push(sItem);
												});
											}
										});
									}
								}
							});
						});
					} else {
						this.trainingLists = [];
					}
				});
			},
			// 去看视频
			tolearnWindow(item) {
				if (item.detailEnabledMark == 10 || !item.detailEnabledMark) {
					this.showSuccess("请先报名", 'none');
					return;
				}
				let id = item.objectId;
				let enabledMark = (item.enabledMark ? item.enabledMark : '');
				uni.navigateTo({
					url: '/pages/learnCenter/videoWindow?id=' + id + '&type=1&enabledMark='+enabledMark  // type: 1 培训考试中心
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.examBtn1,
	.examBtn2,
	.examBtn3,
	.examBtn4 {
		width: 44px;
		height: 20px;
		line-height: 20px;
		border-radius: 2px;
		font-size: 12px;
		text-align: center;
	}
	
	.examBtn1 {
		color: #fff;
		background: #FF7E00;
	}
	
	.examBtn2 {
		color: #fff;
		background: #1DB712;
	}
	
	.examBtn3 {
		color: #fff;
		background: #323233;
	}
	
	.buttons {
		min-width: 66px;
		height: 20px;
		text-align: center;
		font-size: 13px;
		border-radius: 18px;
		padding: 7px 10px;
		color: #fff;
		background: #2265EE;
	}
	
	.buttons.disabled {
		color: #8B8A92;
		background: #F0EFF4;
	}

	.hv90 {
		height: 90vh;
	}

	.content {
		height: 80vh;
		position: relative;
	}

	.twoButtons {
		width: 100%;
		justify-content: space-between;
		align-items: end;
		gap: 10px;
		padding: 15px 0;
		padding-bottom: 0 !important;
		box-sizing: border-box;

		.btn1 {
			font-size: 13px;
			border-radius: 18px;
			padding: 5px 10px;
			border: 1px solid #2265EE !important;
			background: #fff !important;
			color: #416eed !important;
			min-width: 48px;
			text-align: center;
		}

		.btn2 {
			font-size: 13px;
			border-radius: 18px;
			padding: 5px 10px;
			border: 1px solid #2265EE !important;
			background: #2265EE !important;
			color: #fff !important;
			min-width: 48px;
			text-align: center;
		}
	}

	.oneButtons {
		width: 100%;
		border-bottom: 1px solid #e3e3e3;
		// margin-bottom: 10px;
		padding-bottom: 10px;
		padding-top: 10px;

		.btn1 {
			height: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #969799;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			float: right;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
		}
	}
	
	.page .content .item {
		margin: 16px !important;
		margin-bottom: 0 !important;
		padding: 15px;
		box-sizing: border-box;
		height: auto !important;
	}

	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		align-items: center;
		background: #F6F8FC;

		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;
			
			.header-1 {
				margin: 30rpx 0 0 38rpx;
				justify-content: center;
				align-items: center;
			
			}
			
			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
			
			.header-3 {
				flex: 1;
			}
		}

		.content {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			position: relative;
			// gap: 32rpx;

			.title {
				margin: 0 0 0 32rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #323233;
				line-height: 48rpx;
				text-align: left;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-style: normal;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item {
				margin: 0 32rpx 0 32rpx;
				height: 278rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				// align-items: center;

				.title {
					// width: 608rpx;
					display: flex;
					margin-left: 0;
					flex-direction: row;
					position: relative;
					text-align: left;
					height: 44rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #323233;
					line-height: 44rpx;
					font-style: normal;
				}

				.twoButton {
					width: 608rpx;
					display: flex;
					margin: 16rpx 0 0 0;
					flex-direction: row;
					position: relative;

					.btn1 {
						position: absolute;
						left: 0;
						width: 88rpx;
						height: 40rpx;
						background: #1DB712;
						border-radius: 4rpx;
						text-align: left;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}

					.btn11 {
						background: #2265EE !important;
					}

					.btn12 {
						background: #323233 !important;
					}

					.btn2 {
						position: absolute;
						right: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 40rpx;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 28rpx;
						color: #969799;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.line {
					margin-top: 80rpx;
					width: 622rpx;
					height: 2rpx;
					background: #EBEDF0;
				}

				.twoButton21 {
					.btn1 {
						background: #fff !important;
						border: 2rpx solid #E2E7F5 !important;
						color: #8B8A92 !important;
					}

					.btn2 {
						background: #F0EFF4 !important;
						color: #8B8A92 !important;
					}
				}

				.twoButton22 {
					width: 608rpx;
					display: flex;
					justify-content: flex-end;
					/* 添加这一行以使子元素靠右对齐 */
					flex-direction: row;
					position: relative;
					margin: 24rpx 0 0 0;
					display: flex;
					flex-direction: row;
					text-align: right;
					gap: 32rpx;
					float: right;

					.btn1 {
						background: #fff;
						color: #646566;
						border: none;
						height: 64rpx;
						border-radius: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						.llText {
							display: flex;
							flex-direction: row;
							align-items: center;

							.score {
								margin-left: 16rpx;
								margin-right: 8rpx;
								font-weight: bold;
								font-size: 48rpx;
								color: #D91515;
								line-height: 52rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}

					.btn2 {
						background: #fff;
						color: #646566;
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						.jnText {
							display: flex;
							flex-direction: row;
							align-items: center;

							.score {
								margin-left: 16rpx;
								margin-right: 8rpx;
								font-weight: bold;
								font-size: 48rpx;
								color: #2265EE;
								line-height: 52rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}
				}

				.twoButton2 {
					width: 608rpx;
					display: flex;
					justify-content: flex-end;
					flex-direction: row;
					position: relative;
					margin: 24rpx 0 0 0;
					display: flex;
					flex-direction: row;
					text-align: right;
					gap: 32rpx;
					float: right;

					.btn1 {
						width: 176rpx;
						height: 64rpx;
						border-radius: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 2rpx solid #2265EE;
						font-weight: 400;
						font-size: 28rpx;
						color: #2265EE;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}

					.btn2 {
						width: 176rpx;
						height: 64rpx;
						background: #2265EE;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 36rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
		}

		.content1 {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			position: relative;
			gap: 32rpx;

			.title {
				margin: 32rpx 0 0 32rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #323233;
				line-height: 48rpx;
				text-align: left;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-style: normal;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.item {
				margin: 0 32rpx 0 32rpx;
				height: 278rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					// width: 608rpx;
					display: flex;
					margin-left: 0;
					flex-direction: row;
					position: relative;
					text-align: left;
					height: 44rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #323233;
					line-height: 44rpx;
					font-style: normal;
				}

				.twoButton {
					width: 608rpx;
					display: flex;
					margin: 16rpx 0 0 0;
					flex-direction: row;
					position: relative;

					.btn1 {
						position: absolute;
						left: 0;
						width: 88rpx;
						height: 40rpx;
						background: #1DB712;
						border-radius: 4rpx;
						text-align: left;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #FFFFFF;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}

					.btn11 {
						background: #2265EE !important;
					}

					.btn12 {
						background: #323233 !important;
					}

					.btn2 {
						position: absolute;
						right: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #969799;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.line {
					margin-top: 80rpx;
					width: 622rpx;
					height: 2rpx;
					background: #EBEDF0;
				}

				.twoButton2 {
					width: 608rpx;
					display: flex;
					margin: 16rpx 0 0 0;
					flex-direction: row;
					position: relative;

					.btn1 {
						position: absolute;
						left: 0;

						height: 40rpx;
						color: #969799;

						border-radius: 4rpx;
						text-align: left;
						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}


					.btn2 {
						position: absolute;
						right: 0;

						display: flex;
						justify-content: center;
						align-items: center;


						.score {
							font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
							font-weight: bold;
							font-size: 48rpx;
							color: #2265EE;
							line-height: 52rpx;
							text-align: left;
							font-style: normal;
						}

						.fen {
							margin: 0 0 0 8rpx;
							font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
							font-weight: 400;
							font-size: 24rpx;
							color: #646566;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
						}


					}

					.btn22 {
						position: absolute;
						right: 0;

						display: flex;
						justify-content: center;
						align-items: center;
						width: 176rpx;
						height: 64rpx;
						color: #FFFFFF;
						background: #2265EE;
						border-radius: 36rpx;





					}

					.btn23 {
						position: absolute;
						right: 0;

						display: flex;
						justify-content: center;
						align-items: center;
						width: 176rpx;
						height: 64rpx;
						color: #8B8A92;
						background: #F0EFF4;
						border-radius: 36rpx;
					}
				}
			}
		}

		.content2 {
			margin: 32rpx 0 0 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #FFF;
			justify-content: center;
			position: relative;
			padding: 32rpx 0 0 0;




			.item {
				// width: 686rpx;
				// height: 486rpx;
				display: flex;
				flex-direction: column;
				position: relative;



				.img {
					width: 686rpx;
					height: 386rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
				}

				.button {
					position: absolute;
					top: 32rpx;
					right: 32rpx;
					width: 88rpx;
					height: 40rpx;
					background: #323233;
					border-radius: 8rpx;
					font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					font-style: normal;
				}

				.button1 {
					background: #FF7E00 !important;
				}

				.content {

					display: flex;
					flex-direction: column;
					gap: 0;


					.title {
						margin: 16rpx 0 0 0;

						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 32rpx;
						color: #323233;

						line-height: 48rpx;
						text-align: left;
						font-style: normal;
					}

					.decrible {
						margin: 4rpx 0 0 0;

						font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
						font-weight: 400;
						font-size: 24rpx;
						color: #969799;

						text-align: left;
						font-style: normal;
					}
				}
			}

		}
	}
	
	.line-ellipsis {
		font-size: 13px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.5;
		min-height: 3em;
		margin-bottom: 3px;
	}
</style>